@r: 100rem;
*{
	margin: 0;
	padding: 0;
	list-style: none;
	text-decoration: none;
}
/* 背景容器的css */
.cont {
	margin: 20px 0 0 0;
	width: 200px;
	height: 360px;
	position: relative;
	overflow: hidden;
	background-size: 100% 100%;
}

/* 小方块的css */
.small-box(@color) {
	width: 20px;
	height: 20px;
	border: 1px solid #fff;
	box-sizing: border-box;
	position: absolute;
	/* 传参,变量名需用{}包起来 */
	background-color: ~"@{color}";
	background-size: 15px 15px;
}
.main,.pc_ver,.mobile_ver{
	width: 100%;
}
.pc_ver{
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	background-image: linear-gradient(40deg, #7A88FF, #7AFFAF);
	.box_cont {

		/* 标题 */
		.box_cont_title {
			text-align: center;
		}

		/* 背景容器 */
		.container {
			.cont();
		}
		
		/* 触底后模型的class */
		.fixed_model {
			.small-box(#bbb);
		}
	}
	
	/* 展示 */
	.box_show{
		margin: 40px 0 0 20px;
		h3{
			margin-bottom: 20px;
		}
		.box_show_block{
			width: 80px;
			height: 80px;
			// background: #fff;
			margin-bottom: 40px;
			position: relative;
		}
		.box_show_item{
			display: flex;
			height: 20px;
			margin-bottom: 20px;
			.box_show_item_txt{
				text-align: justify;
				text-justify: inter-ideograph;
				width: 64px;
			}
			.box_show_item_txt::after{
				width: 100%;
				content: "";
				display: inline-block;
			}
			.box_show_item_val{
				color: red;
			}
		}
		.box_show_btn{
			margin-bottom: 10px;
		}
	}
	
	/* 每一个小方块 */
	.activity_model,.next_activity_model {
		.small-box(#ff0000);
	}
}

.mobile_ver{
	background-color: #000;
}